$BASIC_COLOR: #000000;
$DEFAULT_BACKGROUND: #f4f4f4;
$BACKGROUND: #fff;
// $ACTIVE_COLOR: #d5b978;

$BASIC_FONT_COLOR: #000000;
$GREY_FONT_COLOR: #999999;
$DEEP_GREY_FONT_COLOR: #6e6e6f;

$RAISE: #eb2d3b;
$FALL: #00b267;
$ORANGE_COLOR: #feac00;
$LIGHT_RED: #ff592a;
$ACTIVE_COLOR: #508ced;
$DARK_BLUE: #4d5dfe;
$NIGHT_BLUE: #353955;
$ACTIVE_FONT_COLOR: #ffe38f;
$BUTTON_COLOR: #497cf3;
$BOX_LINE: #e1e1e1;

$FOOT_COLOR: #fcda66;

$BLUE_COLOR: #497cf3;
$GRAY_BLUE: #4f6b92;

$baseWidth: 375;
$baseSize: $baseWidth/10;

@function rem($val) {
	@if unitless($val) == true {
		@return $val;
	} @else {
		@return #{($val / ($val * 0 + 1)) / $baseSize}rem;
	}
}

// @include screen(1080);
// @include screen(960);
// @include screen(750);
// @include screen(640);
// @include screen(600);
// @include screen(540);
// @include screen(480);
// @include screen(414);
// @include screen(400);
// @include screen(375);
// @include screen(360);
// @include screen(320);
// @include screen(240);

@mixin screen($res-max) {

	@media only screen and (max-width: #{$res-max}px), only screen and (max-device-width: #{$res-max}px) {
		html,
		body {
			font-size: #{($baseSize * ($res-max/$baseWidth))}px !important;
        }
    }
}


@mixin triangle($direction, $size, $tend, $color) {
	@content;
	width: 0;
	height: 0;
	@if $direction == top {
		border-bottom: rem($tend) solid $color;
		border-left: rem($size) solid transparent;
		border-right: rem($size) solid transparent;
	} @else if $direction == right {
		border-left: rem($tend) solid $color;
		border-top: rem($size) solid transparent;
		border-bottom: rem($size) solid transparent;
	} @else if $direction == bottom {
		border-top: rem($tend) solid $color;
		border-left: rem($size) solid transparent;
		border-right: rem($size) solid transparent;
	} @else if $direction == left {
		border-right: rem($tend) solid $color;
		border-top: rem($size) solid transparent;
		border-bottom: rem($size) solid transparent;
	}
}
